<template>
	<div class="game-container report-container addMember-container">
		<div class="line-member"></div>
		<div class="addMember-content">
			<div class="form-header">
				<span>{{ $t('member.new_member_information') }}</span>
				<span>
					<code style="color: #ff3b30">*</code>
					{{ $t('common.add_dialog_tips') }}
				</span>
			</div>
			<el-form
				ref="form"
				:model="form"
				:rules="rules"
				label-width="100px"
			>
				<el-form-item
					:label="`${$t('common.number_type')}:`"
					prop="accountType"
				>
					<el-select
						v-model="form.accountType"
						size="medium"
						:placeholder="$t('common.all')"
						clearable
						style="width: 395px"
					>
						<el-option
							v-for="item in accountTypeArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.choose_merchant')}:`"
					prop="merchantId"
				>
					<merchant-select
						v-model="form.merchantId"
						v-symbols
						:placeholder="$t('common.choose_merchant')"
						:merchantInfo.sync="searchmerchantInfo"
						:disabled="dialogMerchantDisabled"
						@change="handleMerchantChange(merchantList)"
						style="width: 395px"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.top_agent')}:`"
					prop="parentProxyName"
				>
					<el-input
						v-model="form.parentProxyName"
						v-symbols
						size="medium"
						maxlength="11"
						autocomplete="off"
						:placeholder="$t('common.please_enter')"
						style="width: 395px"
						@input="handleChangeProxyName"
						@change="getBuissModel"
					></el-input>
				</el-form-item>
				<!-- <el-form-item
					:label="`${$t('common.choose_club')}:`"
					prop="clubId"
				>
					<el-select
						v-model="form.clubId"
						size="medium"
						:placeholder="$t('member.select_club')"
						clearable
						style="width: 395px"
						@change="handleChangeClub"
					>
						<el-option
							v-for="item in clubList"
							:key="item.id"
							:label="item.clubName"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item
					class="current_spetify_item required"
					:label="`${$t('common.business_model')}:`"
				>
					<!-- <business-model-selector
						v-model="form.businessModel"
						:value="form.businessModel"
						disabled
						style="width: 395px"
					/> -->
					<el-select
						v-model="form.businessModel"
						:placeholder="`${$t('common.select_all')}`"
						:disabled="disabledBusinessModel"
						style="width: 395px"
					>
						<el-option
							v-for="(item, index) in bussinessData"
							:key="index"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.member_number')}:`"
					prop="username"
				>
					<el-input
						v-model="form.username"
						v-symbols
						size="medium"
						maxlength="11"
						:placeholder="$t('common.input')"
						clearable
						autocomplete="off"
						style="width: 395px"
						oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('member.password')}:`"
					prop="password"
				>
					<el-input
						v-model="form.password"
						size="medium"
						:placeholder="$t('member.password_rules')"
						clearable
						autocomplete="off"
						oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
						maxlength="12"
						style="width: 395px"
					></el-input>
				</el-form-item>
				<!-- <el-form-item
					:label="`${$t('member.nickname')}:`"
					prop="nickName"
				>
					<el-input
						v-model="form.nickName"
						v-symbols
						size="medium"
						:placeholder="$t('member.nickname_check')"
						clearable
						maxlength="12"
						style="width: 395px"
						@input="handleNickNameInput"
					></el-input>
				</el-form-item> -->
				<!-- <el-form-item :label="`${$t('common.name')}:`" prop="realName">
					<el-input
						v-model="form.realName"
						v-symbols
						size="medium"
						:placeholder="$t('common.please_enter')"
						clearable
						maxlength="15"
						style="width: 395px"
					></el-input>
				</el-form-item> -->
				<!-- 手机号 -->
				<!-- <el-form-item
					:label="`${$t('member.phone_number')}:`"
					prop="mobile"
					:rules="mobileRules"
				>
					<el-select
						v-model="form.areaCode"
						size="medium"
						:placeholder="$t('common.please_choose')"
						style="width: 100px"
						@change="handelAreaCode"
					>
						<el-option
							v-for="(item, k) in zonecodeList"
							:key="k"
							:label="item.code"
							:value="item.code"
						></el-option>
					</el-select>
					<el-input
						v-model.trim="form.mobile"
						v-symbols
						size="medium"
						:placeholder="$t('common.please_enter')"
						clearable
						:maxlength="
							selectedZonecode.len[
								selectedZonecode.len.length - 1
							] * 1
						"
						style="width: 285px"
						autocomplete="off"
						@input="onMobileNumberInput"
					></el-input>
				</el-form-item> -->
				<MemberCheckTypeSelect  v-model="form.checkType" width="395px" />
				<el-form-item :label="`${$t('member.gender')}:`">
					<el-select
						v-model="form.gender"
						size="medium"
						:placeholder="$t('common.please_choose')"
						style="width: 395px"
					>
						<el-option
							v-for="item in genderType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item :label="`${$t('common.vip_level')}:`">
					<el-select
						v-model="form.vipId"
						size="medium"
						style="width: 395px"
						disabled
					> -->
				<!-- <el-option
							v-for="item in vipRiskList"
							:key="item.code"
							:label="item.gradeNum"
							:value="item.id"
						>
						</el-option> -->
				<!-- <el-option label="0" value="0"></el-option>
					</el-select>
				</el-form-item> -->
				<!-- 邮箱 -->
				<!-- <el-form-item :label="`${$t('member.mailbox')}:`" prop="email">
					<el-input
						v-model.trim="form.email"
						size="medium"
						:placeholder="$t('common.please_enter')"
						clearable
						maxlength="32"
						oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
						style="width: 395px"
					></el-input>
				</el-form-item> -->
				<el-form-item :label="`${$t('member.apply_info')}:`">
					<el-input
						v-model.trim="form.applyInfo"
						size="medium"
						type="textarea"
						:placeholder="$t('common.please_enter')"
						show-word-limit
						clearable
						maxlength="500"
						style="width: 395px"
						@input="handleInput"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						:disabled="loading"
						:loading="loading"
						size="medium"
						icon="el-icon-edit"
						@click="add"
					>
						{{ $t('common.submit') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { routerNames } from '@/utils/consts'
import list from '@/mixins/list'
import { notSpecial2, isHaveEmoji, getNewSubStrAndLen } from '@/utils/validate'
import {
	EMAIL_PATTERN,
	NO_SPECIAL_CHAR,
	NICKNAME_PATTERN
} from '@/utils/pattern'
import Finger from '@/utils/fingerprintjs2'
import md5 from 'js-md5'
// import BusinessModelSelector from '@/components/Form/BusinessModelSelector.vue'
export default {
	name: routerNames.addMember,
	components: {
		// BusinessModelSelector
		MemberCheckTypeSelect:  () => import('@/components/MemberCheckTypeSelect')
	},
	mixins: [list],
	data() {
		return {
			disabledBusinessModel: true,
			searchmerchantInfo: {},
			loading: false,
			isAgent: false,
			businessModel: '',
			form: {
				checkType: 0,
				accountType: '1',
				username: undefined,
				password: undefined,
				mobile: undefined,
				realName: undefined,
				parentProxyName: undefined,
				gender: undefined,
				// vipId: '0',
				areaCode: '',
				email: undefined,
				// nickName: undefined,
				applyInfo: undefined,
				deviceNo: Finger.get(),
				merchantId: undefined
				// clubId: undefined,
				// clubName: undefined
			},
			currency: '',
			areaCodeLength: 11,
			merchantchangeList: [],
			zonecodeList: [],
			selectedZonecode: {
				len: []
			},
			mobileRules: [
				{
					min: null,
					max: null,
					message: this.$t('member.select_valid_number'),
					trigger: 'blur'
				}
			],
			// clubList: [],
			timer: null,
			bussinessData: [
				// { value: '0', label: this.$t('common.business_model_both') },
				{ value: '1', label: this.$t('common.business_model_cash') },
				{ value: '2', label: this.$t('common.business_model_credit') }
			]
		}
	},

	computed: {
		dialogMerchantDisabled() {
			//  当商户没有下级商户时，默认选择当前商户，选项禁用
			return !this.$store.getters.isZk
				? this.merchantList.length <= 1
				: false
		},
		merchantList() {
			return this.$store.getters.merchantList || []
		},
		// accountTypeArr() {
		// 	const arr =
		// 		(this.globalDics.accountType &&
		// 			JSON.parse(JSON.stringify(this.globalDics.accountType))) ||
		// 		[]
		// 	arr.length && arr.splice(-1)
		// 	return arr
		// },
		accountTypeArr() {
			return this.globalDics.accountType || []
		},
		genderType() {
			const arr = []
			if (
				this.globalDics.genderType &&
				this.globalDics.genderType.length
			) {
				this.globalDics.genderType.forEach((item) => {
					arr.unshift(item)
				})
			}
			return arr
		},
		// phoneAreaCode() {
		// 	return this.globalDics.phoneAreaCode || []
		// },
		rules() {
			// const reg1 = /^[A-Za-z]{1}(?=(.*[a-zA-Z]){1,})(?=(.*[0-9]){1,})[0-9A-Za-z]{3,10}$/
			// const reg1 = /^[A-Za-z]{1}(?=(.*[a-zA-Z]){0,})(?=(.*[0-9]){1,})[0-9A-Za-z]{3,10}$/
			const reg1 = /^[A-Za-z0-9]{4,11}$/
			// const reg2 = /^([a-zA-Z0-9]*[a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[a-zA-Z0-9]*[0-9]+[a-zA-Z]+[a-zA-Z0-9]*)$/
			// const reg2 = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*(),.?":{}|<>;'\[\]\-\+\=\/`_~\\])[A-Za-z\d!@#$%^&*(),.?":{}|<>;'\[\]\-\+\=\/`_~\\]{8,12}$/
			const reg2 = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d!@#$%^&*(),.?":{}|<>;'\[\]\-\+\=\/`_~\\]{8,12}$/
			const testUserName = (rule, value, callback) => {
				const isSpecial = !notSpecial2(String(value))
				const isRmoji = isHaveEmoji(String(value))
				if (isSpecial) {
					callback(new Error(this.$t('common.validate.no_space')))
				} else if (isRmoji) {
					callback(
						new Error(this.$t('member.expression_is_not_supported'))
					)
				} else if (!value || !reg1.test(value)) {
					callback(new Error(this.$t('member.user_name_rules')))
				} else {
					callback()
				}
			}
			const testParentProxyName = (rule, value, callback) => {
				const isSpecial = !notSpecial2(String(value))
				const isRmoji = isHaveEmoji(String(value))
				if (isSpecial) {
					callback(new Error(this.$t('common.validate.no_space')))
					return
				}
				if (isRmoji) {
					callback(
						new Error(this.$t('member.expression_is_not_supported'))
					)
					return
				}
				if (!value || !reg1.test(value)) {
					callback(new Error(this.$t('member.user_name_rules')))
					return
				}
				callback()
				return
			}
			const testPassword = (rule, value, callback) => {
				// const isSpecial = !notSpecial2(String(value))
				const isRmoji = isHaveEmoji(String(value))
				if (isRmoji) {
					callback(
						new Error(this.$t('member.expression_is_not_supported'))
					)
				} else if (!reg2.test(value)) {
					callback(new Error(this.$t('member.password_rules2')))
				} else {
					callback()
				}
			}
			// const testMobile = (rule, value, callback) => {
			// 	if (!!value && !MOBILE_PATTERN.test(value)) {
			// 		callback(new Error('请输入有效的手机号码'))
			// 	} else {
			// 		callback()
			// 	}
			// }
			// const checkPhone = (rule, value, callback) => {
			// 	const phoneReg =
			// 		this.form.areaCode === '+86' ? /^1[0-9][0-9]{9}$/ : /^9[0-9][0-9]{7}$/
			// 	if (value) {
			// 		if (phoneReg.test(value)) {
			// 			callback()
			// 		} else {
			// 			callback(new Error('请输入有效号码'))
			// 		}
			// 	} else {
			// 		callback()
			// 	}
			// }
			const testEmail = (rule, value, callback) => {
				if (!!value && !EMAIL_PATTERN.test(value)) {
					callback(new Error(this.$t('member.test_email_rules')))
				} else {
					callback()
				}
			}
			const testNickName = (rule, value, callback) => {
				const isSpecial = !notSpecial2(String(value))
				const isRmoji = isHaveEmoji(String(value))
				if (isSpecial) {
					callback(new Error(this.$t('common.validate.no_space')))
				} else if (isRmoji) {
					callback(
						new Error(this.$t('member.expression_is_not_supported'))
					)
				} else if (!NICKNAME_PATTERN.test(value)) {
					callback(new Error(this.$t('member.nickname_check')))
				} else {
					callback()
				}
			}
			const testRealName = (rule, value, callback) => {
				const isSpecial = !notSpecial2(String(value))
				const isSpecial2 = /\s/
				const isRmoji = isHaveEmoji(String(value))
				if (isSpecial) {
					callback(new Error(this.$t('member.no_character')))
				} else if (isRmoji) {
					callback(
						new Error(this.$t('member.expression_is_not_supported'))
					)
				} else if (!!value && isSpecial2.test(value)) {
					callback(new Error(this.$t('member.no_space')))
				} else {
					callback()
				}
			}
			return {
				merchantId: [
					{
						required: true,
						message: this.$t('common.components.select_merchant'),
						trigger: 'change'
					}
				],
				checkType:  [
					{
						required: true,
						message:  '请选择安全校验',
						trigger: 'change'
					}
				],
				accountType: [
					{
						required: true,
						message: this.$t('member.select_account_type'),
						trigger: 'change'
					}
				],
				username: [
					{
						required: true,
						validator: testUserName,
						trigger: 'blur'
					}
				],
				password: [
					{
						required: true,
						validator: testPassword,
						trigger: 'blur'
					},
					{
						min: 8,
						max: 12,
						message: this.$t('member.password_rules'),
						trigger: 'blur'
					}
				],
				parentProxyName: [
					{
						required: true,
						trigger: 'blur',
						validator: testParentProxyName
					}
				],
				email: [
					{
						required: false,
						validator: testEmail,
						trigger: 'blur'
					}
				],
				nickName: [
					{
						required: true,
						validator: testNickName,
						trigger: 'blur'
					}
				],
				realName: [
					{
						required: false,
						validator: testRealName,
						trigger: 'blur'
					}
				]
				// clubId: [
				// 	{
				// 		required: true,
				// 		message: this.$t('member.select_club'),
				// 		trigger: 'change'
				// 	}
				// ]
			}
		}
	},
	watch: {
		merchantList: {
			handler() {
				if (this.merchantList.length === 1) {
					this.form.merchantId = this.merchantList[0].id
				}
			},
			deep: true,
			immediate: true
		},
		'form.merchantId': {
			handler(val) {
				let currency = ''
				this.form.areaCode = ''
				for (let i = 0; i < this.merchantchangeList.length; i++) {
					const ele = this.merchantchangeList[i]
					if (val === ele.id) {
						currency = ele.currency
					}
				}
				for (let i = 0; i < this.zonecodeList.length; i++) {
					const ele = this.zonecodeList[i]
					if (currency === ele.currency) {
						this.form.areaCode = ele.code
					}
				}
				if (this.form.areaCode) {
					this.handelAreaCode(this.form.areaCode)
				}
				// this.form.clubId = undefined
				// this.form.clubName = undefined
				// this.clubList = []
				// this.getClubQuery()
			},
			deep: true
		}
	},
	created() {
		// this.getVipRisk()
		this.getZonecode()
		// this.setRandomNickName()
		if (!this.$store.getters.isZk) {
			this.form.merchantId = this.$store.getters.merchantInfo.id
		}
	},
	mounted() {
		// if (!this.$store.getters.isZk) {
		// 	console.log(this.$store.getters.merchantInfo.id,'this.$store.getters.merchantInfo.id');
		// 	this.form.merchantId = this.$store.getters.merchantInfo.id
		// }
	},
	methods: {
		getBuissModel() {
			this.form.businessModel = ''
			this.businessModel = ''
			if (this.form.parentProxyName !== '') {
				this.$api
					.getProxyDetailQueryDetail({
						userName: this.form.parentProxyName,
						merchantId: this.form.merchantId
					})
					.then((res) => {
						if (res?.code === 200 && res.data) {
							if (
								res?.data?.businessModel == 1 ||
								res?.data?.businessModel == 2
							) {
								this.form.businessModel = `${
									res?.data?.businessModel
								}`
								this.businessModel = `${
									res?.data?.businessModel
								}`
								this.$forceUpdate()
							}
						} else {
							this.form.businessModel = ''
							this.businessModel = ''
							this.$forceUpdate()
							callback(new Error('请输入有效代理账号'))
							return
						}
					})
					.catch((e) => {
						this.form.businessModel = ''
						this.businessModel = ''
						this.$forceUpdate()
						callback(new Error('请输入有效代理账号'))
						return
					})
			} else {
				this.form.businessModel = ''
				this.businessModel = ''
				this.$forceUpdate()
			}
		},
		// 字母数字长度为1，汉字长度为2,总计不超过12个
		handleNickNameInput(val) {
			const { newStr } = getNewSubStrAndLen(val)
			this.form.nickName = newStr
		},
		// 代理详情-基本信息-概要信息以及个人资料
		handleParentProxy(val) {},
		// 俱乐部下拉框改变事件
		// handleChangeClub(val) {
		// 	const target = this.clubList.find(
		// 		(item) => String(item.id) === String(val)
		// 	)
		// 	if (target) {
		// 		this.form.clubName = target.clubName
		// 	} else {
		// 		this.form.clubName = ''
		// 	}
		// },
		// 上级代理输入改变事件
		handleChangeProxyName(val) {
			this.form.parentProxyName = val.replace(/[\u4E00-\u9FA5]/g, '')
			// this.form.clubId = undefined
			// this.form.clubName = undefined
			// this.clubList = []
			// clearTimeout(this.timer)
			// this.timer = setTimeout(() => {
			// 	this.getClubQuery()
			// }, 500)
		},
		// 获取俱乐部列表
		// getClubQuery() {
		// 	this.$api
		// 		.getClubQuery({
		// 			merchantId: this.form.merchantId,
		// 			proxyName: this.form.parentProxyName
		// 		})
		// 		.then((res) => {
		// 			this.clubList = res?.data || []
		// 		})
		// },
		handleInput(val) {
			this.form.applyInfo = val.replace(NO_SPECIAL_CHAR, '')
		},
		onMobileNumberInput() {
			this.form.mobile = this.form.mobile.replace(/[^\d]+/g, '')
		},
		getZonecode() {
			this.$api.systemKvConfigLoadSupportPhoneCode().then((res) => {
				// console.log(res, 'systemKvConfigLoadSupportPhoneCode')
				this.zonecodeList = res.data
			})
		},
		handleMerchantChange(val) {
			this.merchantchangeList = val
			// console.log(val, 'val')
		},
		changeMobileRules(min, max) {
			this.mobileRules = [
				{
					min,
					max,
					message: this.$t('member.select_valid_number'),
					trigger: 'blur'
				}
			]
		},
		// getVipRisk() {
		// 	this.$api.getMemberRiskAPI().then((res) => {
		// 		const { code, data } = select_valid_number
		// 		if (code === 200) {
		// 			this.vipRiskList = data || []
		// 		}
		// 	})
		// },
		handelAreaCode(val) {
			this.selectedZonecode = this.zonecodeList.find(
				(item) => val === item.code
			)
			this.changeMobileRules(
				this.selectedZonecode.len[0] * 1,
				this.selectedZonecode.len[
					this.selectedZonecode.len.length - 1
				] * 1
			)
			this.form.mobile = ''
		},
		setRandomNickName() {
			// 默认生成随机昵称: 固定字母DX + 随机8位数字或小写字母随机组合
			const startCode = 'DX'
			const letterNumStr = '0123456789abcdefghijklmnopqrstuvwxyz'
			let randomCode = ''
			for (let i = 0; i < 8; i++) {
				const randomVal = Math.round(
					Math.random() * (letterNumStr.length - 1)
				)
				randomCode += letterNumStr[randomVal]
			}
			this.form.nickName = startCode + randomCode
		},
		add() {
			Object.keys(this.form).forEach((key) => {
				if (this.form[key] === '') {
					this.form[key] = undefined
				}
			})
			const obj = JSON.parse(JSON.stringify(this.form))
			obj.areaCode =
				!obj.mobile || obj.mobile === '' ? undefined : obj.areaCode
			// const item = this.vipRiskList.find((item) => item.id === obj.vipId)
			const params = {
				...obj
				// vipSerialNum: item && item.gradeNum
			}
			// let lock = true
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.loading = true
					params.password = `${md5(
						md5(params.password).toUpperCase()
					).toUpperCase()}`
					this.$api
						.addMemberAPI(params)
						.then((res) => {
							const { data, code, msg } = res || {}
							if (code === 200) {
								this.$confirm(
									`${this.$t('member.member') +
										data +
										this.$t(
											'member.data_submitted_successfully'
										)}`,
									{
										confirmButtonText: this.$t(
											'common.confirm'
										),
										type: 'success',
										showCancelButton: false
									}
								)
								this.reset()
							} else {
								const blackCode = [
									-10001,
									-10002,
									-10003,
									-10004
								]
								if (blackCode.includes(res.code)) {
									this.$confirm(
										`${msg +
											this.$t('member.no_addition')})}`,
										this.$t('common.components.tip'),
										{
											confirmButtonText: this.$t(
												'common.sure'
											),
											type: 'warning',
											showCancelButton: false
										}
									)
								} else {
									this.$message({
										message: msg || this.$t('common.error'),
										type: 'error'
									})
								}
							}
						})
						.catch(() => {})
						.finally(() => {
							this.loading = false
						})
				}
			})

			// setTimeout(() => {
			// 	this.loading = false
			// 	lock = true
			// }, 1000)
		},
		reset() {
			this.$refs['form'].resetFields()
			this.businessModel = ''
			this.form = {
				businessModel: '',
				merchantId: undefined,
				accountType: '1',
				username: undefined,
				password: undefined,
				// vipId: '0',
				mobile: undefined,
				realName: undefined,
				parentProxyName: undefined,
				gender: undefined,
				areaCode: '',
				email: undefined,
				nickName: undefined,
				applyInfo: undefined,
				deviceNo: Finger.get()
				// clubId: undefined,
				// clubName: undefined
			}
			if (!this.$store.getters.isZk) {
				this.form.merchantId = this.$store.getters.merchantInfo.id
			} else {
				this.form.merchantId = undefined
			}
			// this.getVipRisk()
			this.getZonecode()
			this.setRandomNickName()
		},
		checkValue(val) {}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}

.addMember-container {
	background-color: #f5f5f5;
	margin: 0;
	min-height: calc(100vh - 105px);

	.line-member {
		height: 50px;
	}

	.addMember-content {
		width: 1500px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		position: relative;
		padding-top: 65px;

		.form-header {
			height: 45px;
			line-height: 45px;

			span:nth-child(1) {
				position: absolute;
				left: 30px;
				top: 0;
				color: #666;
				font-size: 14px;
				font-weight: 700;
			}

			span:nth-child(2) {
				position: absolute;
				right: 30px;
				color: #999;
				font-weight: 400;
				font-size: 14px;
				top: 0;
			}
		}
	}

	.addMember-content::after {
		position: absolute;
		top: 45px;
		content: '';
		width: 100%;
		background-color: rgba(233, 233, 233, 1);
		height: 1px;
	}

	//::v-deep  input::-webkit-outer-spin-button,
	//::v-deep  input::-webkit-inner-spin-button {
	//	display: none;
	//}
}

::v-deep .current_spetify_item {
	position: relative;
	> label.el-form-item__label::before {
		content: '*';
		color: #f56c6c;
		display: inline-box;
		font-size: 14px;
		font-weight: 700;
		margin-right: 5px;
	}
}
</style>
